<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多功能外卖网站</title>
    <style>
        body { font-family: Arial, sans-serif; }
        header, footer { background-color: #f8f9fa; padding: 20px; text-align: center; }
        .container { margin: 20px auto; width: 90%; max-width: 1200px; }
        .restaurant-list, .menu-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
        .restaurant-item, .menu-item { border: 1px solid #ddd; padding: 15px; width: 30%; text-align: center; }
        .menu-item img { max-width: 100%; height: auto; }
        .cart { margin-top: 20px; padding: 15px; border: 1px solid #ddd; }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到多功能外卖</h1>
    </header>
    <div class="container">
        <section id="restaurants" class="restaurant-list">
            <!-- 餐厅列表将通过JavaScript动态加载 -->
        </section>
        <section id="menus" class="menu-list">
            <!-- 菜单列表将通过JavaScript动态加载 -->
        </section>
        <section id="cart" class="cart">
            <h3>购物车</h3>
            <ul id="cart-items"></ul>
            <p>总价：<span id="total-price">0.00</span>元</p>
        </section>
    </div>
    <footer>
        <p>&copy; 2025 多功能外卖. 版权所有.</p>
    </footer>

    <script>
        const restaurants = [
            {id: 1, name: '餐厅A', description: '简介：餐厅A提供各种美味快餐。'},
            {id: 2, name: '餐厅B', description: '简介：餐厅B以健康饮食为理念。'}
        ];

        const menus = {
            1: [{id: 1, name: '汉堡', price: 15}, {id: 2, name: '薯条', price: 10}],
            2: [{id: 3, name: '沙拉', price: 20}, {id: 4, name: '果汁', price: 12}]
        };

        function loadRestaurants() {
            const restaurantSection = document.getElementById('restaurants');
            restaurantSection.innerHTML = '';
            restaurants.forEach(restaurant => {
                const div = document.createElement('div');
                div.className = 'restaurant-item';
                div.innerHTML = `<h2>${restaurant.name}</h2><p>${restaurant.description}</p><button onclick="loadMenu(${restaurant.id})">查看菜单</button>`;
                restaurantSection.appendChild(div);
            });
        }

        function loadMenu(restaurantId) {
            const menuSection = document.getElementById('menus');
            menuSection.innerHTML = '';
            menus[restaurantId].forEach(item => {
                const div = document.createElement('div');
                div.className = 'menu-item';
                div.innerHTML = `<h3>${item.name}</h3><p>价格：${item.price}元</p><button onclick="addToCart(${item.id}, '${item.name}', ${item.price})">加入购物车</button>`;
                menuSection.appendChild(div);
            });
        }

        let cartItems = [];
        function addToCart(id, name, price) {
            cartItems.push({id, name, price});
            updateCart();
        }

        function updateCart() {
            const cartItemsElement = document.getElementById('cart-items');
            const totalPriceElement = document.getElementById('total-price');
            cartItemsElement.innerHTML = '';
            let total = 0;
            cartItems.forEach(item => {
                total += item.price;
                const li = document.createElement('li');
                li.textContent = `${item.name} - ${item.price}元`;
                cartItemsElement.appendChild(li);
            });
            totalPriceElement.textContent = total.toFixed(2);
        }

        loadRestaurants();
    </script>
</body>
</html>